<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>羽毛球活动经费计算器</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="container">
        <h1>羽毛球活动经费计算器</h1>
        <div class="calculator">
            <!-- 参与人管理部分 -->
            <div class="section">
                <h2>参与人管理</h2>
                <div class="input-group">
                    <input type="text" id="newParticipantName" placeholder="输入参与者姓名">
                    <button onclick="addParticipant()">添加参与者</button>
                </div>
                <div id="participantsList" class="participants-list">
                    <!-- 参与者列表将在这里动态显示 -->
                </div>
            </div>

            <!-- 时间段配置部分 -->
            <div class="section">
                <h2>时间段配置</h2>
                <div class="input-group">
                    <label for="hours">总时长（小时）：</label>
                    <input type="number" id="hours" min="0.5" step="0.5" value="1" onchange="updateTimeSlots()">
                </div>
                <div id="timeSlots" class="time-slots">
                    <!-- 时间段配置将在这里动态显示 -->
                </div>
            </div>

            <button onclick="calculateFees()" class="calculate-button">计算费用</button>
            
            <!-- 结果显示部分 -->
            <div class="result" id="result">
                <h2>费用明细</h2>
                <div id="warning" class="warning-message" style="display: none;">
                    <p>⚠️ 警告：总费用与垫付总额不一致！</p>
                    <p>总费用：<span id="totalFeeWarning">0</span> 元</p>
                    <p>垫付总额：<span id="totalAdvancedWarning">0</span> 元</p>
                    <p>差额：<span id="diffAmount">0</span> 元</p>
                </div>
                <p>总费用：<span id="totalFee">0</span> 元</p>
                <div id="perPersonDetails" class="per-person-details">
                    <!-- 每人费用明细将在这里动态显示 -->
                </div>
            </div>
        </div>
    </div>
    <script src="script.js"></script>
</body>
</html>
